import { Button, DatePicker, Input, NavBar, Toast } from 'antd-mobile';
import { Icon } from '@/components';
import './index.scss';
import classNames from 'classnames';
import { billListData } from '@/contants';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import moment from 'moment';
import { addBillList } from '@/store/modules';
import { useDispatch } from 'react-redux';

const NewInfo = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const [billType, updateBillType] = useState('pay');
  const [visible, updateVisible] = useState(false);
  const [payDate, updatePayDate] = useState(new Date());
  const [useFor, updateUseFor] = useState('');

  const onConfirm = (val) => {
    updatePayDate(val);
  };

  //  支出/收入钱数
  const [value, setValue] = useState('');

  const onSave = () => {
    if (!value)
      return Toast.show({
        content: `请输入具体${billType === 'pay' ? '支出' : '收入'}钱数`,
      });
    if (!useFor)
      return Toast.show({
        content: `请选择${billType === 'pay' ? '支出' : '收入'}方式`,
      });
    const data = {
      type: billType,
      money: billType === 'pay' ? -value : +value,
      date: payDate,
      useFor,
    };

    
    dispatch(addBillList(data, ()=> {
      Toast.show({
        icon: 'success',
        content: '保存成功',
      });
    }));
   
  };

  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(billType === 'pay' && 'selected')}
            onClick={() => updateBillType('pay')}
          >
            支出
          </Button>
          <Button
            className={classNames(billType === 'income' && 'selected')}
            shape="rounded"
            onClick={() => updateBillType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={() => updateVisible(true)}>
              <Icon type="calendar" className="icon" />
              <span className="text">{moment(payDate).format('YYYY-MM-DD')}</span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={visible}
                onClose={() => {
                  updateVisible(false);
                }}
                onConfirm={(val) => onConfirm(val)}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={value}
                onChange={(val) => {
                  setValue(val);
                }}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[billType].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames('item', useFor === item.type && 'selected')}
                      key={item.type}
                      onClick={() => updateUseFor(item.type)}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={() => onSave()}>
          保 存
        </Button>
      </div>
    </div>
  );
};

export { NewInfo };
